<html>

<head>
    <title>OpenGlobus - Earth planet</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../css/og.css" type="text/css" />
    <style>
        #layerName {
            position: absolute;
            color: black;
            background-color: white;
            z-index: 100;
            padding: 10px;
            font-size: 18px;
            margin: 15px;
        }
    </style>
</head>

<body>
    <div id="layerName"></div>
    <div id="globus" style="width:100%;height:100%"></div>
    <script type="module">
        'use strict';

        import { Globe } from '../../src/og/Globe.js';
        import { Layer } from '../../src/og/layer/Layer.js';
        import { XYZ } from '../../src/og/layer/XYZ.js';
        import { Vector } from '../../src/og/layer/Vector.js';
        import { GlobusTerrain } from '../../src/og/terrain/GlobusTerrain.js';

        var sat = new XYZ("MapQuest Satellite", {
            shininess: 20,
            specular: [0.00048, 0.00037, 0.00035],
            diffuse: [0.88, 0.85, 0.8],
            ambient: [0.15, 0.1, 0.23],
            isBaseLayer: false,
            url: "//tileproxy.cloud.mapquest.com/tiles/1.0.0/sat/{z}/{x}/{y}.png",
            visibility: true,
            attribution: '@2014 MapQuest - Portions @2014 "Map data @ <a target="_blank" href="//www.openstreetmap.org/">OpenStreetMap</a> and contributors, <a target="_blank" href="//opendatacommons.org/licenses/odbl/"> CC-BY-SA</a>"',
            zIndex: 0,
            pickingEnabled: false
        });

        var osm = new XYZ("OpenStreetMap", {
            specular: [0.0003, 0.00012, 0.00001],
            extent: [[42.3, 43.21], [42.6, 43.42]],
            shininess: 20,
            diffuse: [0.89, 0.9, 0.83],
            isBaseLayer: false,
            url: "//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
            visibility: true,
            attribution: 'Data @ OpenStreetMap contributors, ODbL',
            zIndex: 1,
            opacity: 0.7
        });


        var vec = new Vector("Disable picking or event handling", {
            fading: true,
            'visibility': true,
            'isBaseLayer': false,
            'diffuse': [0, 0, 0],
            'ambient': [1, 1, 1],
            'zIndex': 2,
            'pickingEnabled': false,
            'entities': [{
                'geometry': {
                    'type': "Polygon",
                    'coordinates': [[[42.4, 43.3], [42.42, 43.34], [42.44, 43.35], [42.49, 43.34], [42.5, 43.302]]],
                    'style':{
                        'lineWidth': 8, 
                        'fillColor': "rgba(190, 0, 0, 0.6)",
                        'lineColor': "red"
                    }
                }
            }]
        });

        var globus = new Globe({
            "target": "globus",
            "name": "Earth",
            "terrain": new GlobusTerrain(),
            "layers": [sat, osm, vec]
        });

        globus.planet.renderer.events.on("mousemove", function (e) {
            if (e.pickingObject) {
                document.getElementById("layerName").innerHTML = e.pickingObject.name;
                e.pickingObject.opacity = 1.0;
            } else {
                document.getElementById("layerName").innerHTML = "";
                osm.opacity = 0.7;
            }

        });

        globus.planet.flyExtent(osm.getExtent());
    </script>
</body>

</html>